<template>
	<view class="container">
		<view class="menu">
			<uni-segmented-control :current="current" :values="values"
			 @clickItem="onClickItem" styleType="button" activeColor="#4cd964"></uni-segmented-control>
		</view>
		<view class="layout">
			<view class="box" v-if="isErrNetwork.bool">
				<view class="pic">
					<image src="../../static/accessKeyCode.jpg" mode="widthFix" ></image>
				</view>
				<view class="text">{{isErrNetwork.errMsg}}</view>
			</view>
			<view class="box" v-for="(item,index) in imgs" :key="item._id">
				<view class="pic">
					<image lazy-load :src="item.url" mode="widthFix" @click="onPreview(index)"></image>
				</view>
				<view class="text">{{item.content}}</view>
				<view class="author"> —— {{item.author}}</view>
			</view>
		</view>
		<view class="float">
			<view class="item" @click="onRefresh">
				<uni-icons type="reload" size="26" color="#888"></uni-icons>
			</view>
			<view class="item" @click="onTop">
				<uni-icons type="up" size="26" color="#888"></uni-icons>
			</view>
		</view>
		<view class="loadMore">
			<uni-load-more status="loading"></uni-load-more>
		</view>
	</view>
</template>

<script setup>

import { computed, ref } from "vue"

//图片对象列表
const imgs = ref([])

//错误接口标志
const isErrNetwork = ref({bool:false,errMsg:""})

//分段器索引
const current = ref(0)

//分段器内容对象
const classify = [
	{key:"all",value:"全部"},
	{key:"dog",value:"狗狗"},
	{key:"cat",value:"猫猫"},
]

//分段器内容值
const values = computed(()=>classify.map(item=>item.value))

//错误消息提示框
const errShowToast = (errTitle)=>{
	uni.showToast({
		title:errTitle,
		icon:"none"
	})
}

//请求图片数组
const network = ()=>{
	uni.showNavigationBarLoading()
	uni.request({
		url:"https://tea.qingnian8.com/tools/petShow",
		data:{
			size:5,
			type:classify[current.value].key
		},
		header:{
			"access-key":"wqh512584614"
		},
	}).then(res=>{
		if(res.data.errCode === 0){
			imgs.value = [...imgs.value,...res.data.data]			
		}else if(res.data.errCode === 400){
			//errShowToast(res.data.errMsg)
			isErrNetwork.value = {bool:true,errMsg:res.data.errMsg}
		}
	}).catch(err=>{
		errShowToast("接口有误！")
	}).finally(()=>{
		uni.hideNavigationBarLoading();
		uni.stopPullDownRefresh()
	})
}

//分段器切换
const onClickItem = (e)=>{
	current.value = e.currentIndex;
	imgs.value = [];
	network();
}


//点击刷新
const onRefresh = () =>{
	imgs.value = [];
	network();
}

//滚动到顶部
const onTop = () =>{
	uni.pageScrollTo({
		scrollTop:0,
		duration:100
	})
}

//图片预览
const onPreview = (index)=>{
	let urls = imgs.value.map(item=>item.url)
	uni.previewImage({
		current:index,
		urls
	})
}

//下拉刷新
onPullDownRefresh(()=>{	
	imgs.value = [];
	current.value=0
	network();
})

//触底加载更多
onReachBottom(()=>{
	network();
})

network()


</script>

<style lang="scss" scoped>
	.container{
		.menu{
			padding: 50rpx 50rpx 0;
		}
		.layout{
			padding: 50rpx;
			.box{
				margin-bottom: 50rpx;
				box-shadow: 0 10rpx 40rpx rgba(0, 0, 0, 0.8);
				border-radius: 15rpx;
				overflow: hidden;
				.pic{
					image{
						width: 100%;
					}
				}
				.text{
					padding: 30rpx;
					color: #333;
					font-size: 36rpx;
				}
				.author{
					padding: 0 30rpx 30rpx;
					text-align: right;
					color: #888;
					font-size: 30rpx;
				}
			}
		}
		.float{
			position: fixed;
			right: 30rpx;
			bottom: 80rpx;
			padding-bottom: env(safe-area-inset-bottom);
			.item{
				width: 90rpx;
				height: 90rpx;
				background: rgba(255, 255, 255, 0.9);
				margin-bottom: 20rpx;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				border: 1 solid #eee;
			}
		}
		.loadMore{
			padding-bottom: calc(env(safe-area-inset-bottom) + 50rpx);
		}
	}
</style>
